<template>
  <div>
    <h2>refd 的使用</h2>
    <my-dialog-vue ref="myDialog"></my-dialog-vue>
    <button @click="getValue">获取数据</button>
    <button @click="clearValue">重置数据</button>
    <hr />
    <h2>自定义指令</h2>
    <input v-focus ref="ipt" type="text" />
  </div>
</template>
<script>
import myDialogVue from './components/myDialog.vue';

export default {
  // 局部自定义指令
  directives: {
    focus: {
      inserted(el) {
        el.focus();
      },
    },
  },
  components: {
    myDialogVue,
  },
  data() {
    return {};
  },
  mounted() {
    // this.$refs.ipt.focus(); // 进入页面时input框获取焦点
  },
  methods: {
    // 获取数据
    getValue() {
      console.log(this.$refs.myDialog.getVal()); // 直接调用子组件的方法
      this.$refs.myDialog.getVal();
    },
    // 重置数据
    clearValue() {
      // console.log(); // 直接调用子组件的方法
      this.$refs.myDialog.clearVal();
    },
  },
};
</script>
